<template>
  <div class="detail" v-if="goodsId">
    <detail-nav-bar class="detail-nav-bar" :navBarTitles="navBarTitles" ref="navBar" @navBarClick="navBarClick"/>
    <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll">
      <detail-swiper :swiper-images="swiperImages" @swiperImgLoad="imageLoad"/>
      <detail-base-info :goods-info="goodsInfo" ref="baseInfo"/>
      <detail-shop-info :shop-info="shopInfo"/>
      <detail-goods-info :detail-info="detailInfo" @goodsImgLoad="imageLoad"/>
      <detail-goods-param :goods-param="goodsParam" ref="goodsParam"/>
      <detail-comment-info :comment-info="commentInfo" ref="comment"/>
      <goods-list :goods="recommends" ref="recommends"/>
    </scroll>
    <back-top v-if="showBackTop" @click.native="backTopClick"/>
    <detail-tab-bar @addCart="addToCart"/>
  </div>
</template>

<script>
  import DetailNavBar from './childDetail/DetailNavBar'
  import DetailSwiper from './childDetail/DetailSwiper'
  import DetailBaseInfo from './childDetail/DetailBaseInfo'
  import DetailShopInfo from './childDetail/DetailShopInfo'
  import DetailGoodsInfo from './childDetail/DetailGoodsInfo'
  import DetailGoodsParam from './childDetail/DetailGoodsParam'
  import DetailCommentInfo from './childDetail/DetailCommentInfo'
  import DetailTabBar from './childDetail/DetailTabBar'

  import Scroll from 'components/common/scroll/Scroll'
  import GoodsList from 'components/content/goods/GoodsList'

  import {getDetail, getRecommend, GoodsInfo, ShopInfo, GoodsParam} from 'network/detail'
  import {scrollRefreshMixin, backTopMixin} from 'common/mixins'
  import {debounce} from 'common/util'
  import {mapActions} from 'vuex'

  export default {

    name: "Detail",
    mixins: [scrollRefreshMixin, backTopMixin],
    components: {
      DetailGoodsInfo,
      DetailSwiper,
      DetailNavBar,
      DetailShopInfo,
      DetailBaseInfo,
      DetailGoodsParam,
      DetailCommentInfo,
      DetailTabBar,
      Scroll,
      GoodsList,
    },
    props: {
      goodsId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        swiperImages: [],
        goodsInfo: {},
        shopInfo: {},
        detailInfo: {},
        goodsParam: {},
        commentInfo: {},
        recommends: [],
        navBar: [
          {title: '商品', scroll: 0},
          {title: '参数', scroll: -1000, ref: 'goodsParam'},
          {title: '评论', scroll: -1500, ref: 'comment'},
          {title: '推荐', scroll: -2000, ref: 'recommends'}
        ]
      }
    },
    computed: {
      navBarTitles() {
        return this.navBar.map(item => item.title)
      }
    },
    created() {

      // 获取商品信息
      getDetail(this.goodsId).then(result => {
        const data = result.result
        // 轮播图数据
        this.swiperImages = data.itemInfo.topImages
        // 商品基本信息
        this.goodsInfo = new GoodsInfo(data.itemInfo, data.columns, data.shopInfo.services)
        // 店铺信息
        this.shopInfo = new ShopInfo(data.shopInfo)
        // 商品详情图片数据
        this.detailInfo = data.detailInfo
        // 商品参数
        this.goodsParam = new GoodsParam(data.itemParams)
        // 商品评论
        this.commentInfo = data.rate.cRate ? data.rate.list[0] : {}
      })
      // 获取更多推荐
      getRecommend().then(result => {
        this.recommends = result.data.list
      })
    },
    mounted() {
      this.changeTemplateScroll = debounce(() => {
        for (let i = 1; i < this.navBarTitles.length; i++) {
          let navBar = this.navBar[i]
          navBar.scroll = (-this.$refs[navBar.ref].$el.offsetTop)
        }
      }, 200)
    }
    ,
    methods: {
      ...mapActions(['addCart']),
      imageLoad() {
        // 调用scrollRefreshMixin的防抖刷新
        this.debounceRefresh()
        // 使用防抖获取一下组件的位置
        this.changeTemplateScroll()
      },
      navBarClick(index) {
        this.$refs.scroll.scrollTo(0, this.navBar[index].scroll, 0)
      },
      contentScroll(position) {
        let y = position.y
        this.navBar.map((item, index) => {
          if (y <= item.scroll) {
            this.changeNavBarItemIndex(index)
          }
        })

        // 是否显示返回顶部按钮
        this.listenerShowBackTop(position)
      },
      changeNavBarItemIndex(index) {
        this.$refs.navBar.currentIndex = index
      },
      changeTemplateScroll() {
        // 更新与顶栏联动的组件坐标，由created钩子传入替代方法
      },
      /**
       * 添加购物车
       */
      addToCart() {
        // 获取购物车需要暂时的商品信息
        const product = {
          id: this.goodsId,
          image: this.swiperImages[0],
          title: this.goodsInfo.title,
          desc: this.goodsInfo.desc,
          price: this.goodsInfo.lowNowPrice,
          count: 1,
          checked: true,
        }
        // 添加到Vuex中的购物车对象中
        this.addCart(product).then(data => {
          this.$total(data)
        })
      }
    },
  }
</script>

<style scoped>
  .detail {
    height: 100vh;
    position: relative;
    z-index: 10;
  }

  .detail-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    background-color: var(--color-background);
  }

  .content {
    height: calc(100% - 44px - 49px);
    background-color: var(--color-background);
    position: absolute;
    top: 44px;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }

</style>
